<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆糖，美图壁纸兴趣社区</title>
    <link rel="icon" href="../img/duitang.ico">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../layui/layui.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <div class="header-wrap">
        <div class="header-fixed">
            <Header class="header">
                <a id="logo" href="">堆糖</a>
                <div class="category">
                    <h6>分类</h6>
                    <span></span>
                    <div>
                        <p>热门推荐</p>
                        <p>超省钱</p>
                        <ul>
                            <li>家居生活</li>
                            <li>美食菜谱</li>
                            <li>手工DIY</li>
                            <li>时尚搭配</li>
                            <li>美妆造型</li>
                            <li>婚纱婚礼</li>
                            <li>文字句子</li>
                            <li>插画绘画</li>
                            <li>影音书籍</li>
                            <li>人物明星</li>
                            <li>植物多肉</li>
                            <li>生活百科</li>
                            <li>搞笑萌宠</li>
                            <li>人文艺术</li>
                            <li>设计</li>
                            <li>古风</li>
                            <li>壁纸</li>
                            <li>旅行</li>
                            <li>头像</li>
                            <li>摄影</li>
                            <li>表情</li>
                            <li>素材</li>
                            <li>动图</li>
                        </ul>
                    </div>
                </div>
                <div class="search">
                    <input id="sea-ipt" type="text" placeholder="搜索感兴趣的内容">
                    <input id="sea-btn" type="button">
                    <ul>
                        <li class="sea-fir">搜索含<span></span>的图片</li>
                        <li>搜索含<span></span>的商品</li>
                        <li>搜索含<span></span>的文章</li>
                        <li>搜索含<span></span>的专辑</li>
                        <li>搜索含<span></span>的达人</li>
                    </ul>
                </div>
                <ul class="header-right">
                    <li id="left">堆糖生活家</li>
                    <li id="slog">注册/登录</li>
                    <img src="../img/tx.jpeg" alt="">
                    <ul>
                        <li><i></i>个人主页</li>
                        <li><i></i>账号设置</li>
                        <li><i></i>退出登录</li>
                    </ul>
                </ul>
            </Header>
        </div>
    </div>
    <!-- 主页面 -->
    <div class="box">
        <!-- 下载App -->
        <div class="download-app">
            <img src="../img/down02.png" alt="加载失败了">
        </div>

        <!-- 轮播图 -->
        <div class="banner">
            <div class="banner-left">
                <div class="layui-carousel" id="banner">
                    <div carousel-item>
                        <div>
                            <img src="../img/lb01.jpg" alt="加载失败">
                        </div>
                        <div>
                            <img src="../img/lb02.jpg" alt="加载失败">
                        </div>
                        <div>
                            <img src="../img/lb03.jpg" alt="加载失败">
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner-right">
                <h2>社区热点</h2>
                <ul>
                    <li>拼切壁纸</li>
                    <li>宇航员头像</li>
                    <li>荣耀乒乓</li>
                    <li>崛与宫村</li>
                    <li>创造营2021</li>
                    <li>逢考必过</li>
                    <li>美食动图</li>
                    <li>宋亚轩</li>
                </ul>
                <div class="dt-act">
                    <span class="dt-left">精选</span>
                    <span class="dt-right">爱豆语录</span>
                </div>
                <div class="dt-appload">
                    <img src="../img/down03.png" alt="加载失败">
                    <div class="pg-appload-text">
                        <h4>堆糖 - 美好研究所</h4>
                        <p>千万同好 珍藏分享</p>
                        <a href="https://www.duitang.com/app/duitang/" target="_blank">立即下载</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 核心 -->
        <div class="content">
            <div class="content-left">
                <h2 class="select">每日精选</h2>
                <h2>关注动态</h2>
            </div>
            <ul class="content-center"></ul>
            <div class="content-right">
                <div class="follow">
                    <h3>推荐关注</h3>
                    <span>换一批</span>
                    <ul class="refresh">
                        <li>
                            <img src="" alt="" class="image">
                            <h4></h4>
                            <p>擅长领域:<span></span></p>
                            <div>关注</div>
                        </li>
                        <li>
                            <img src="" alt="" class="image">
                            <h4></h4>
                            <p>擅长领域:<span></span></p>
                            <div>关注</div>
                        </li>
                        <li>
                            <img src="" alt="" class="image">
                            <h4></h4>
                            <p>擅长领域:<span></span></p>
                            <div>关注</div>
                        </li>
                        <li>
                            <img src="" alt="" class="image">
                            <h4></h4>
                            <p>擅长领域:<span></span></p>
                            <div>关注</div>
                        </li>
                    </ul>
                    <a href="https://www.duitang.com/">查看更多<i></i></a>
                </div>
                <img class="tips" src="../img/police.jpeg" alt="加载失败">
                <img class="code" src="../img/down04.png" alt="加载失败">
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer-wrap">
        <footer class="footer">
            <div class="footer-top">
                <div class="footer-left">
                    <h2>APP下载</h2>
                    <p>扫码下载堆糖手机客户端</p>
                    <img src="../img/down01.png" alt="加载失败">
                </div>
                <table class="footer-right">
                    <tr>
                        <th>关于我们</th>
                        <th>关注我们</th>
                        <th>友情链接</th>
                    </tr>
                    <tr>
                        <td>关于我们</td>
                        <td>新浪微博</td>
                        <td>爱物网</td>
                    </tr>
                    <tr>
                        <td>加入我们</td>
                        <td>微信公众号</td>
                        <td>东方女性网</td>
                    </tr>
                    <tr>
                        <td>联系我们</td>
                        <td></td>
                        <td>SEO顾问</td>
                    </tr>
                    <tr>
                        <td>商务合作</td>
                        <td></td>
                        <td>更多...</td>
                    </tr>
                </table>
                <div class="footer-right"></div>
            </div>
            <ul class="footer-bottom">
                <li>沪ICP备10038086号-3</li>
                <li>沪公网安备31010102002072号</li>
                <li>有害内容举报电话：021-63462282</li>
                <li>上海市互联网违法和不良信息举报中心</li>
                <li>网上有害信息举报专区</li>
                <li>自营经营者信息</li>
                <li>增值电信业务经营许可证：沪B2-20180610</li>
                <li>网络文化经营许可证 沪网文〔2020〕1392-114号</li>
                <li>Copyright ©2021 duitang.com 版权所有</li>
            </ul>
        </footer>
    </div>
    <!-- 遮罩 -->
    <div id="mask"></div>
    <!-- 小小登录 -->
    <div id="smlog">
        <div class="title">登录<span></span></div>
        <div class="sm-box">
            <ul class="left">
                <li>
                    <p>手机号:</p>
                    <input class="ipt" type="text">
                </li>
                <li>
                    <p>密码:</p>
                    <input class="ipt" type="password">
                    <a id="forget" href="javascript:;">忘记密码?</a>
                </li>
                <li>
                    <input type="checkbox">
                    <span>记住我</span>
                    <a href="javascript:;">切换至海外手机号登录</a>
                </li>
                <li id="login">登录</li>
                <li class="log">
                    <div>
                        <i></i>
                        <p>QQ登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微博登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微信登录</p>
                    </div>
                </li>
            </ul>
            <div class="right">
                <img src="../img/down01.png" alt="">
                <p>扫一扫下载手机客户端浏览体验更佳</p>
            </div>
        </div>
        <a href="reg.html">还没有账号？立即注册</a>
    </div>
    <!-- 回到顶部 -->
    <div id="return-top"></div>
    <!-- 下载APP浮动 -->
    <div class="download-fixed">找图必备神器App</div>

    <script src="../js/public.js"></script>
    <script>
        // 初始化
        let userArr = []
        let jsonarr
        // 导入本地json数据
        loadjson()
        function loadjson() {
            jsonarr = JSON.parse(localStorage.getItem('dt_data'))
            userArr.length = 0
            axios.get('index.json').then(function (res) {
                let arr = res.data.data.object_list
                $('.content-center').empty()
                arr.forEach((v, i) => {
                    if (i >= 0) {
                        userArr.push({ id: v.atlas.sender.id, name: v.atlas.sender.username, sp: v.atlas.album.name })
                        // let img = $('<img src="">').prop('src', isPic(v.atlas.sender.avatar, 200)) // 头像
                        let img = $('<img src="">').addClass('image')
                        let h3 = $('<h3></h3>').text(v.atlas.sender.username) // 作者名字
                        let p = $('<P></p>').text(v.resource_info) // 标签
                        let top_div = $('<div></div>').addClass('title').append(img).append(h3).append(p) // 全部加入
                        let top_p = $('<P></p>').text(v.atlas.desc) // 标题
                        let top_ul = $('<ul></ul>') // 存放图片
                        v.atlas.blogs.forEach(function (pic) {
                            // let img = $('<img src="">').prop('src', isPic(pic.photo.path, 300)) // 头像
                            let img = $('<img src="">')
                            let li = $('<li></li>').append(img)
                            top_ul.append(li)
                        })
                        let div = $('<div></div>').addClass('con-top').append(top_div).append(top_p).append(top_ul)
                        let ul = $('<ul></ul>').addClass('con-bottom')
                        let ul_li1 = $('<li></li>')
                        let ul_li2 = $('<li></li>')
                        if (jsonarr != null && jsonarr.length != 0) {
                            let agarr = jsonarr[0].pname.split('$')
                            if (agarr.some(s => s == v.id)) {
                                ul_li1.addClass('agree').text(v.atlas.like_count + 1)
                            } else {
                                ul_li1.text(v.atlas.like_count)
                            }
                            let srarr = jsonarr[1].pname.split('$')
                            if (srarr.some(s => s == v.id)) {
                                ul_li2.addClass('star').text(v.atlas.favorite_count + 1)
                            } else {
                                ul_li2.text(v.atlas.favorite_count)
                            }
                        } else {
                            ul_li1.text(v.atlas.like_count)
                            ul_li2.text(v.atlas.favorite_count)
                        }
                        let ul_li3 = $('<li></li>').text('更多')
                        ul.append(ul_li1).append(ul_li2).append(ul_li3)
                        let li = $('<li></li>').append(div).append(ul).attr('data-id', v.id).attr('user-id', v.atlas.sender.id)
                        $('.content-center').append(li)
                    }
                })
            }).then(function () {
                // 插入4个数据
                for (let i = 0; i < 4; i++) {
                    let index = Math.floor(Math.random() * userArr.length)
                    let li = $('.refresh li').eq(i)
                    li.find('img').attr('src', '')
                    li.attr('user-id', userArr[index].id)
                    li.find('h4').text(userArr[index].name)
                    li.find('span').text(userArr[index].sp)
                    li.find('div').removeClass('foll').text('关注')
                }
            })
        }

        function refresh() {
            if (isJson()) {
                let fo = jsonarr[2].pname.split('$')
                // 插入4个数据
                for (let i = 0; i < 4; i++) {
                    let index = Math.floor(Math.random() * userArr.length)
                    let li = $('.refresh li').eq(i)
                    li.find('img').attr('src', '')
                    li.attr('user-id', userArr[index].id)
                    li.find('h4').text(userArr[index].name)
                    li.find('span').text(userArr[index].sp)
                    if (fo.some(v => v == userArr[index].id)) {
                        li.find('div').addClass('foll').text('已关注')
                    } else {
                        li.find('div').removeClass('foll').text('关注')
                    }
                }
            } else {
                oplogin()
            }
        }
        // 换一批
        $('.follow>span').click(() => refresh())
        // 关注的点击事件
        $('.follow div').click(function () {
            let jsonStr = localStorage.getItem('duitang')
            if (jsonStr != null && jsonStr != '[]') {
                userObj = JSON.parse(jsonStr)
            }
            if (userObj) {
                let isFoll = $(this).hasClass('foll')
                if (isFoll) {
                    $(this).text('关注').removeClass('foll')
                } else {
                    $(this).text('已关注').addClass('foll')
                }
                update($(this).parent().attr('user-id'), 2, isFoll)
            } else {
                oplogin()
            }
        })
        // 轮播图
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            carousel.render({
                elem: '#banner',
                width: '760px',
                height: '380px'
            });
        });
        // 轮播图的点击事件
        $('#banner').on('click', 'div div', function () {
            let index = $(this).index()
            if (index == 0) {
                window.open('https://www.duitang.com/guide2/event/duitangreturn/?spm=xf', '_blank')
            } else if (index == 1) {
                window.open('https://www.duitang.com/guide2/event/20210305announcement/', '_blank')
            } else {
                window.open('https://www.duitang.com/album/?id=104645724', '_blank')
            }
        })
        // 下载浮动的点击事件
        $('.download-fixed').click(function () {
            setTimeout(() => {
                let div_img_p = $('<div></div>')
                div_img_p.addClass('desc')
                div_img_p.append('<p class="top_desc">海量新鲜美图 一键收藏下载</p>')
                div_img_p.append('<p class="mid_desc">扫一扫</p>')
                div_img_p.append('<p class="mid_desc">下载堆糖APP</p>')
                let div_img = $('<div></div>')
                div_img.addClass('dt_con')
                div_img.append('<img class="icon" src="../img/down05.png">')
                div_img.append('<img class="qr" src="../img/down06.png">')
                div_img.append(div_img_p)
                let div_close = $('<div></div>')
                div_close.addClass('dt_clo')
                div_close.append('<img src="../img/close02.png">')
                $(this).css({
                    width: '100%',
                    height: '10.416vw',
                    borderRadius: 0,
                    backgroundImage: 'none',
                    cursor: 'auto',
                    left: 0,
                    bottom: 0,
                    opacity: 0.95,
                }).text('').append(div_img).append(div_close)
            }, 500)
            $(this).css('opacity', '0')
        })
        // 关闭下载浮动 事件委托
        $('.download-fixed').on('click', '.dt_clo', function (e) {
            e.stopPropagation()
            setTimeout(() => {
                $('.download-fixed').css('opacity', 1).text('找图必备神器App')
            }, 500)
            $(this).parent().empty().css({
                width: '11.66667vw',
                height: '2.8125vw',
                borderRadius: '.83333vw',
                backgroundImage: 'url(../img/right02.png)',
                cursor: 'pointer',
                left: '2.083333vw',
                bottom: '3.333333vw',
                opacity: '0'
            })
        })

        // 进入作品详情
        $('.content-center').on('click', '.con-top ul li', function () {
            let id = $(this).parents('li').data('id')
            let userid = $(this).parents('li').attr('user-id')
            location.href = 'details.html?id=' + id + '&userid=' + userid
        })

        // 关注动态
        $('.content-left h2').click(function () {
            if (isJson()) {
                $(this).addClass('select').siblings().removeClass('select')
                if ($(this).index() == 0) {
                    loadjson()
                } else {
                    let fo = jsonarr[2].pname.split('$')
                    console.log(fo);
                    $('.content-center>li').each(function (index) {
                        if (fo.some(v => v == $(this).attr('user-id'))) {

                        } else {
                            $(this).remove()
                        }
                    });
                }
            } else {
                oplogin()
            }
        })

        function isJson() {
            jsonarr = JSON.parse(localStorage.getItem('dt_data'))
            if (jsonarr != null && jsonarr.length != 0) {
                return true
            } else {
                return false
            }
        }
    </script>
</body>

</html>